<template>
    <div class="position-detail">
        <div class="header">
            <div class="container row aic">
                 <div class="left column flex-grow-1">
                    <div class="title">{{info.posName}}</div>
                    <div class="money"><i class="iconfont icon-YUAN"></i>{{info.salary}}</div>
                    <div class="position">{{info.comName}}</div>
                </div>
                <div class="message">
                    <span>{{info.posArea}}</span>
                    <span>|</span>
                    <span v-if="info.experience == '0'">经验不限</span>
                    <span v-if="info.experience !== '0'">{{info.experience}}年经验</span>
                    <span>|</span>
                    <span v-if="info.education == '0'">小学</span>
                    <span v-if="info.education == '1'">初中</span>
                    <span v-if="info.education == '2'">高中</span>
                    <span v-if="info.education == '3'">大专</span>
                    <span v-if="info.education == '4'">本科</span>
                    <span v-if="info.education == '5'">硕士</span>
                    <span v-if="info.education == '6'">博士</span>
                    <span>|</span>
                    <span>招{{info.wantedNum}}人</span>
                </div>
                <div v-if="$store.state.home.globalUserInfo.roleId == '0'">
                    <DeliverResume :data="{
                        userId: $store.state.home.globalUserInfo.userId,
                        jobId: info.jobId,
                        postJobName: info.posName,
                        comId: info.comId,
                        comName: info.comName,
                    }">
                        <slot name="header"></slot>
                        <template v-slot:container>
                            <el-button type="primary">投递简历</el-button>
                        </template>
                        大多数啊
                    </DeliverResume>
                </div>
            </div>
        </div>

        <div class="container row main-container">
            <div class="main flex-grow-1">
                <div class="topo-head-title row aic">
                    <div class="title">职位亮点</div>
                    <div class="wire flex-grow-1"></div>
                </div>
                <div class="position-stern row">
                    <div v-for="(item,index) in info.param1" :key="index">{{item}}</div>
                    <!-- <div>年终分红</div>
                    <div>员工旅游</div>
                    <div>带薪年假</div>
                    <div>餐补</div>
                    <div>定期体检</div> -->
                </div>
                <div class="topo-head-title row aic">
                    <div class="title">基本信息</div>
                    <div class="wire flex-grow-1"></div>
                </div>
                <ul class="basic-message row">
                    <li class="row">
                        <div class="label">工作性质</div>
                        <div class="text">{{info.posNature}}</div>
                    </li>
                    <li class="row">
                        <div class="label">职位类别</div>
                        <div class="text">{{info.param2}}</div>
                    </li>
                    <li class="row">
                        <div class="label">招聘人数</div>
                        <div class="text">{{info.wantedNum}}人</div>
                    </li>
                    <li class="row">
                        <div class="label">学历要求</div>
                        <div class="text">
                            <span v-if="info.education == '0'">小学</span>
                            <span v-if="info.education == '1'">初中</span>
                            <span v-if="info.education == '2'">高中</span>
                            <span v-if="info.education == '3'">大专</span>
                            <span v-if="info.education == '4'">本科</span>
                            <span v-if="info.education == '5'">硕士</span>
                            <span v-if="info.education == '6'">博士</span>
                        </div>
                    </li>
                    <li class="row">
                        <div class="label">工作经验</div>
                        <div class="text">
                            <span v-if="info.experience == '0'">经验不限</span>
                            <span v-if="info.experience !== '0'">{{info.experience}}年经验</span>
                        </div>
                    </li>
                    <li class="row">
                        <div class="label">性别要求</div>
                        <div class="text">{{info.gender}}</div>
                    </li>
                    <li class="row">
                        <div class="label">年龄要求</div>
                        <div class="text">{{info.age}}</div>
                    </li>
                    <li class="row" style="width: auto;">
                        <div class="label">工作地点</div>
                        <div class="text">{{info.address}}</div>
                    </li>
                </ul>

                <div class="topo-head-title row aic">
                    <div class="title">职位信息</div>
                    <div class="wire flex-grow-1"></div>
                </div>

                <div class="position-message">
                    <div style="height: 10px;"></div>
                    <!-- <p>岗位职责:</p>
                    <p>1、参与项目创意策划会、准确把握市场需求和项目意图，明确设计定位和风格</p>
                    <p>2、服从领导安排，完成本岗以外的技术学习任务</p>
                    <p>3、完成领导交办的临时工作</p> -->
                    <div v-html="info.jobDescribe"></div>
                </div>

            </div>
            <div class="aside column">
                <!-- <img class="job-fair-img" src="../assets/positionDetail/1.png" alt=""> -->
                <div class="row start-message aic">
                    <div class="flex-grow-1">
                        {{info2.jobFairName}}
                    </div>
                    <!-- <div class="iconfont icon-jijiangkaishi start-state"></div> -->
                    <div class="iconfont icon-yijieshu start-state" v-if="info2.status == 0" style="color: #ccc; transform: scale(.78);-webkit-transform: scale(.78);"></div>
                    <div class="iconfont icon-zhengzaijinxing start-state" v-if="info2.status == 1" style="color: red;"></div>
                    <div class="iconfont icon-jijiangkaishi start-state" v-if="info2.status == 2" style="color: green;"></div>
                </div>

                <div class="label-node">
                    <div class="row">
                        <div class="flex-grow-1">
                            <p>开始时间： {{info2.startTime}}</p>
                            <p>结束时间： {{info2.endTime}}</p>
                        </div>
                        <!-- <el-button type="danger" size="small" @click="handleGoJobFair">进入会场</el-button> -->
                        <JoinFairButton
                        size="small" 
                        type="danger"
                        :jobFairId="info2.jobFairId"
                        :info="info2"
                        ></JoinFairButton>
                    </div>
                    <!-- <p>大厅LIVE：73家企业，520位求职者</p> -->
                </div>
                <img :src="BASEURL + info3.logo" width="120" alt="">
                
                <div class="enterprise-messsage">
                    <div class="title">{{info3.name}}</div>
                    <ul>
                        <li>{{info3.level}} </li>
                        <li>{{info3.address}} </li>
                    </ul>
                    <p>联系人：{{info.linkman}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {BASEURL} from '@/api/'
import JoinFairButton from '@/components/JoinFairButton.vue'
import DeliverResume from '@/components/DeliverResume.vue'
export default {
  mounted(){
    console.log(this.$route.params.id);
    this.init()
  },
  methods:{
    async init(){
        let res = await this.$store.dispatch('getPositionDetail',{id: this.$route.params.id} );
        this.info = res.data;
        console.log(this.info,this.info.jobId, this.info.jobFairName, this.info.comId, this.info.comName, this.$store.state.home.globalUserInfo.userId,)

        this.info.param1 = this.info.param1.split(',');
        console.log(this.info.param1)

        let res2 = await this.$store.dispatch('getJobfairDetail',{id: res.data.jobFairId} );
        console.log(res2)
        this.info2 = res2.data;

        let res3 = await this.$store.dispatch('getCompanyDetail',{id: res.data.comId} );
        console.log(res3)
        this.info3 = res3.data;
    },

    handleGoJobFair(){
        this.$router.push({path: `/videolobby/${this.info2.jobFairId}/0`})
    }
  },
  data(){
      return {
          id: this.$route.params.id,
          info: {},
          info2: {},
          info3: {},
          BASEURL,
      }
  },
  components:{
      JoinFairButton,
      DeliverResume,
  }
}
</script>

<style lang="less">
.position-detail {
    .container{ width: 1200px; margin: 0 auto; }
    .header {
        background: #f3f8ff;
        width: 100%;
        padding: 30px;

        .container {
            width: 1200px;
            margin: 0 auto;
            .left {
                .title {
                    font-size: 22px;
                    font-weight: bolder;
                }
                .money{
                    color: #409EFF;
                    margin: 10px 0;
                    line-height: 1;
                    .iconfont {
                        margin-right: 5px;
                    }
                }
            }
            .message {
                width: 300px;
                span {
                    margin-right: 10px;
                }
            }
        }
    }

    .main-container{ padding: 10px 0; }

    .main {
        margin-right: 15px;
        padding-top: 10px;
        .topo-head-title {
            .title {
                font-size: 17px;
                position: relative;
                &::after{
                    content: "";
                    width: 17px;
                    height: 2px;
                    background:#409EFF;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                }
            }
            .wire {
                height: 1px;
                background: #eee;
                margin-left: 15px;
            }
        }

        .position-stern {
            padding: 15px 0;
            margin-bottom: 25px;
            div {
                padding: 5px 7px;
                border: 1px solid #e2e0e0;
                color: #b3b3b3;
                border-radius: 5px;
                font-size: 13px;
                margin-right: 10px;
                line-height: 1;
            }
        }

        .basic-message {
            margin-top: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
            li {
                width: 250px;
                font-size: 13px;
                color: rgb(153, 153, 153);
                margin-bottom: 10px;
                .text {
                    color: #000;
                    margin-left: 25px;
                }
            }
        }

        .position-message {
            p{ line-height: 2; }
        }
    }

    .aside {
        width: 300px;
        min-width: 300px;
        border-left: 1px solid #eee;
        padding-left: 20px;
        .job-fair-img {
            width: 280px;
        }

        .start-message {
            line-height: 1.5;
            margin-top: 10px;
            padding-bottom: 15px;
            border-bottom: 1px dashed #eee;
        }

        .start-state {
            font-size: 50px;
            color: green;
            line-height: 1;
        }

        .label-node {
            color: rgb(192, 192, 192);
            font-size: 13px;
            padding: 20px 0;
            border-bottom: 1px dashed #eee;
            margin-bottom: 20px;
        }
        .enterprise-messsage {
            .title {
                font-size: 14px;
                line-height: 2;
                margin: 10px 0 5px;
            }
            ul{
                color: rgb(192, 192, 192);
                li{
                    font-size: 13px;
                    line-height: 1.4;
                }
            }

            p {
                font-size: 13px;
                color: #999;
                margin-top: 5px;
            }
        }
    }
}
</style>
